<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    :width="modalWidth"
    :maskClosable="false"
    :destroyOnClose="true"
    wrapClassName="custom-modal min-base-modal"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <!-- 内容 -->
    <div v-if="modalType === 'delete'">
      <div class="text-content">是否确认删除此条数据?</div>
    </div>
    <div v-if="['add', 'edit'].includes(modalType)">
      <IndexForm
        ref="indexFormRef"
        :modalType="modalType"
        :selectList="selectList"
        :data="formState"
      />
    </div>

    <template #footer>
      <a-button class="cancel" @click="handleCancel">取消</a-button>
      <a-button
        key="submit"
        type="primary"
        :loading="loading"
        @click="handleOk"
        class="common-buttom"
      >
        确认
      </a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import IndexForm from './IndexForm.vue'

import { save, delOne } from './serve.api'

const indexFormRef = ref()

const emit = defineEmits(['isOk'])

const visible = ref<boolean>(false)
const loading = ref<boolean>(false)

const modalTitle = ref('')
const modalType = ref('')
const modalWidth = ref('')
const modalData = ref({})

const formState = ref({})

defineProps({
  selectList: {
    type: Array,
    default: () => []
  }
})

const showModal = (type: string, data?: any) => {
  visible.value = true
  modalType.value = type
  modalData.value = data

  switch (type) {
    case 'add':
      modalTitle.value = '新增算法'
      modalWidth.value = '32.25rem'
      formState.value = {}
      break
    case 'edit':
      modalTitle.value = '编辑算法'
      modalWidth.value = '32.25rem'
      formState.value = data
      break
    case 'delete':
      modalTitle.value = '删除算法'
      modalWidth.value = '26.25rem'
      break
    default:
      break
  }
}

const handleOk = async () => {
  try {
    if (modalType.value === 'delete') {
      delOneFun(modalData.value)
      return
    }

    await indexFormRef.value.formRef.validateFields()
    if (modalType.value === 'add') {
      addFun()
    } else if (modalType.value === 'edit') {
      editFun()
    } else {
      message.error('表单填写不完整，请检查！')
    }
  } catch (error) {
    console.log('Failed:', error)
  }
}

// 添加
const addFun = () => {
  loading.value = true
  const formState = indexFormRef.value?.formData
  console.log(formState)

  save(
    {
      categoryName: formState.categoryName,
      apiAddress: formState.apiAddress,
      apiToken: formState.apiToken,
      jsonName: formState.jsonName,
      algCategoryInstanceVoList: formState.algCategoryInstanceVoList
    },
    false
  )
    .then(() => {
      message.success('添加成功')
      emit('isOk')
      loading.value = false
      visible.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

// 编辑
const editFun = () => {
  loading.value = true
  const formState = indexFormRef.value?.formData
  console.log(formState)

  save(formState, true)
    .then(() => {
      message.success('修改成功')
      emit('isOk')
      handleCancel()
      loading.value = false
      visible.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

// 删除
const delOneFun = (data: any) => {
  loading.value = true
  delOne(data.id)
    .then(() => {
      loading.value = false
      visible.value = false
      message.success('删除成功')
      emit('isOk')
    })
    .catch(() => {
      loading.value = false
      visible.value = false
    })
}

// 取消
const handleCancel = () => {
  visible.value = false
  // formRef.value?.resetFields()
}

defineExpose({ showModal })
</script>
